<template>
    <el-dialog v-model="stuDialogVisible" :title="title" @closed="dialogClose">
        <el-form :model="form" :rules="rules">
            <el-form-item>
                <upload @transfor-imgurl="handleReceiveImgurl" :reDisplayImgUrl="imgUrl"></upload>
            </el-form-item>
            <el-form-item label="姓名" prop="name" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off" />
            </el-form-item>
            <el-form-item label="班级" prop="class" :label-width="formLabelWidth">
                <el-input v-model="form.class" autocomplete="off" />
            </el-form-item>
            <el-form-item label="年龄" prop="age" :label-width="formLabelWidth">
                <el-input v-model="form.age" autocomplete="off" />
            </el-form-item>
            <el-form-item label="学历" prop="degree" :label-width="formLabelWidth">
                <el-input v-model="form.degree" autocomplete="off" />
            </el-form-item>
            <el-form-item label="城市" prop="city" :label-width="formLabelWidth">
                <el-input v-model="form.city" autocomplete="off" />
            </el-form-item>
            <el-form-item label="项目地址" prop="productUrl" :label-width="formLabelWidth">
                <el-input v-model="form.productUrl" autocomplete="off" />
            </el-form-item>
            <el-form-item label="描述" prop="description" :label-width="formLabelWidth">
                <el-input v-model="form.description" autocomplete="off" />
            </el-form-item>

        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="handleDialogCancel">取消</el-button>
                <el-button type="primary" @click="handleDialogSubmit">
                    提交
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup>
import { reactive, ref, toRefs, watchEffect } from 'vue'
import upload from "./Upload/index.vue"
import useStuDialog from "@/store/stuDialog"
import { storeToRefs } from "pinia"
import { ElMessage } from "element-plus"

import * as api from "@/api/stu"


//接收上传组件回传imgurl的处理函数

let handleReceiveImgurl = (imgurl = "") => {
    console.log(imgurl)
    //input就是upload回传回来的图片地址
    form.headimgurl = imgurl;
}

//定义props

let props = defineProps({
    //actionType: add/edit
    actionType: { //点击类型,编辑还是增加
        type: String,
        required: false,
        default() {
            return 'add'
        }
    },
    title: {//dialog的标题
        type: String,
        required: true,
        default() {
            return '增加学员信息'
        }
    },
    getlistFn: {//更新列表的方法
        type: Function
    },
    reDisplayData: { //回显数据
        type: Object,
        default() {
            return null
        }
    }
})

let { title, actionType } = toRefs(props)

//使用store 
let stuDialogStore = useStuDialog()
let { stuDialogVisible } = storeToRefs(stuDialogStore)
//控制表单显示和隐藏的方法
const dialogFormVisible = ref(true)
//每个formItem的长度
const formLabelWidth = '140px'

//侦听父组件是否传递了回显数据
//声明响应式变量,用于传递回显的图片地址给upload组件
let imgUrl = ref()
//声明一个sId
let sId = ref()
watchEffect(() => {
    if (props.reDisplayData) {
        imgUrl.value = props.reDisplayData.headimgurl;
        sId.value = props.reDisplayData.sId;
        Object.keys(form).forEach(key => {
            form[key] = props.reDisplayData[key]
        })
    }

})

//表单的数据字段
const form = reactive({
    class: '',
    name: '',
    age: '',
    city: '',
    degree: '',
    productUrl: '',
    description: '',
    headimgurl: '',
})
//表单规则
let rules = {
    name: [{ required: true, message: '名字不能为空', trigger: 'blur' }],
    class: [{ required: true, message: '班级不能为空', trigger: 'blur' }],
    city: [{ required: true, message: '城市', trigger: 'blur' }],
    degree: [{ required: true, message: '学历不能为空', trigger: 'blur' }],
    age: [{ required: true, message: '年龄不能为空', trigger: 'blur' }],
    productUrl: [{ required: true, message: '项目地址不能为空', trigger: 'blur' }],
    description: [{ required: true, message: '描述不能为空', trigger: 'blur' }],
}

//点击取消按钮
let handleDialogCancel = () => {
    //隐藏dialog
    stuDialogStore.stuDialogVisible = false;
}
//点击提交按钮
let handleDialogSubmit = async () => {
    // console.log(form)
    //判断actionType

    //如果是add,那么要发起添加信息请求
    switch (actionType.value) {
        case 'add':
            console.log('add')

            //发起添加请求
            try {
                let res = await api.addStuListApi(form)
                console.log(res)
                //关闭dialog
                stuDialogStore.stuDialogVisible = false
                //更新列表
                props.getlistFn()
                //提示成功
                ElMessage.success(res.data.msg)
            } catch (e) {
                console.log(e)
            }

            break;

        case 'edit':
            //如果是edit,那么要发起编辑请求,并且dialog弹框需要数据回显
            //传递给后台的修改的数据
            try {
                let data = { ...form }
                data.sId = sId.value;
                let res = await api.editStuApi(data)
                // console.log('edit')
                props.getlistFn()
                //提示成功
                ElMessage.success(res.data.msg)
                //关闭dialog
                stuDialogStore.stuDialogVisible = false;
            } catch (e) { }
    }
}


//弹窗关闭的事件

let dialogClose = () => {
    //清空dialog的数据
    Object.keys(form).forEach(key => {
        form[key] = ""
    })

    imgUrl.value = null
}

</script>